<template>
    <div class="earlyNote">
        <div class="earlyNoteLeft">
            <el-timeline>
                <el-timeline-item :timestamp="formatDate(item.createdTime)" placement="top"
                    v-for="item in earlyNoteList" :key="item.id">
                    <el-card>
                        <h4 class="title">{{ item.title }}</h4>
                        <div class="content">{{ item.description }}</div>
                        <div class="operation">
                            <el-button type="text" @click="noteDetails(item.id)">查看详情</el-button>
                            <el-button type="text" @click="deleteNote(item.id)">删除记录</el-button>
                        </div>
                    </el-card>
                </el-timeline-item>
                <!-- 占位符元素，用于触发加载更多 -->
                <div ref="loadMoreTrigger" class="load-more-trigger"></div>
            </el-timeline>
        </div>

        <div class="earlyNoteRight">
            <el-card>
                <template #header>
                    <div class="title">
                        <img src="/centerIcons/title.png" style="width: 40px; margin-right: 10px" />
                        <text class="title">{{ noteDetail.title }}</text>
                    </div>

                    <img @click="editNoteDetail(noteDetail)" src="/centerIcons/edit.png" alt="" class="editIcon" />
                </template>
                <div class="content">
                    <img v-for="item in noteDetail.fileList" :key="item.id" class="image" :src="BaseUrl + item.filePath"
                        alt="" />
                </div>
                <template #footer>
                    <i>{{ noteDetail.description }}</i>
                </template>
            </el-card>
        </div>
        <el-dialog v-model="dialogVisible" title="Tips" draggable>
            <template #header>尊敬的小主,您来更新笔记啦！</template>
            <el-form class="form">
                <el-form-item label="标题:">
                    <el-input v-model="originalNoteDetail.title" placeholder="请输入标题" style="width: 160px"></el-input>
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="originalNoteDetail.description" type="textarea"
                        placeholder="请简单描述您的笔记吧"></el-input>
                </el-form-item>
                <!-- 接收组件传递过来的文件 -->
                <Upload v-model:fileList="originalNoteDetail.fileList" />
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        更新笔记
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script setup>
import _ from 'lodash';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { BaseUrl, deleteNoteRecord, getEarlyNoteRecordsList } from '../../../server/userApi';
// 导入上传的组件
import Upload from '../../components/upload/FileUpload.vue';
// 导入自定义的时间过滤器
import { ElMessage } from 'element-plus';
import { formatDate } from '../../components/dateFilter/dateFilter.js';

const earlyNoteList = ref([]);
const noteDetail = ref({});
const store = useStore();
const pageNum = ref(1);
const dialogVisible = ref(false);

// 存储笔记详情的样本，在修改的时候不影响原来的数据
const originalNoteDetail = ref({
    title: '',
    description: '',
    fileList: []
});


const fetchNotes = async () => {
    const data = await getEarlyNoteRecordsList(store.state.userInfo.id, pageNum.value);
    earlyNoteList.value = earlyNoteList.value.concat(data.data);
    if (pageNum.value === 1 && data.data.length > 0) {
        noteDetail.value = { ...data.data[0] };
    }
};

onMounted(async () => {
    await fetchNotes();

    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            pageNum.value++;
            fetchNotes();
        }
    });

    const loadMoreTrigger = document.querySelector('.load-more-trigger');
    if (loadMoreTrigger) {
        observer.observe(loadMoreTrigger);
    }
});

const noteDetails = (id) => {
    const found = earlyNoteList.value.find(item => item.id === id);
    if (found) {
        noteDetail.value = { ...found };
    }
    // console.log(originalNoteDetail.value);
};

// 编辑笔记
const editNoteDetail = (noteDetail) => {
    // console.log(noteDetail)
    // originalNoteDetail.value = noteDetail.value;

    // 深拷贝:这样修改就不影响原来的数据，简单的赋值会影响原来的数据,由于这里是比较复杂的对象集合下面的方法已经不适合
    // originalNoteDetail.value = JSON.parse(JSON.stringify(found.fileList));

    // lodash深拷贝
    originalNoteDetail.value = _.cloneDeep(noteDetail);

    // 映射，将originalNoteDetail中的filePath转换为BaseUrl + filePath
    // originalNoteDetail.value =
    //     noteDetail.value.filePath.map((item) => {
    //         return `${BaseUrl}${item}`;
    //     });

    // 更新 fileList 中的 filePath
    originalNoteDetail.value.fileList = originalNoteDetail.value.fileList.map(file => ({
        ...file,
        filePath: BaseUrl + file.filePath
    }));




    console.log(originalNoteDetail.value);
    dialogVisible.value = true
}

// 删除记录
const deleteNote = async (id) => {
    if (confirm('您确定删除这条记录吗？')) {
        const result = await deleteNoteRecord(id);
        if (result.code === 1265500) {
            ElMessage.success('删除成功');
        }
    }
}

</script>

<style scoped lang="scss">
.earlyNote {
    width: 100%;
    display: flex;
    height: 666px;
    margin-top: 20px;

    .earlyNoteLeft {
        width: 500px;
        height: 100%;
        overflow-y: scroll;

        .el-card {
            width: 95%;
            padding: 0;

            :deep(.el-card__body) {
                padding: 10px 20px 5px 20px;
            }

            .title {
                margin-bottom: 6px;
            }

            .content {

                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .load-more-trigger {
            height: 1px;
        }
    }

    .earlyNoteRight {
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
        height: 100%;

        .el-card {
            flex: 1;

            :deep(.el-card__header) {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .editIcon {
                width: 30px;
                cursor: pointer;

                // 添加浮动
                &:hover {
                    transform: scale(1.1);
                }
            }

            :deep(.el-card__body) {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .content {
                width: 94%;
                display: flex;
                flex-wrap: wrap;

                .image {
                    border-radius: 5px;
                    width: calc(33.33% - 20px);
                    /* Adjust the width to fit 3 images per row, considering the margin */
                    height: 200px;
                    margin: 10px;
                    object-fit: cover;
                    box-shadow: -1px -1px 1px rgb(83, 82, 82);
                    /* 图的覆盖 */

                }
            }
        }
    }
}
</style>
